<template>
  <div class="cascaderPanel">
    <div class="province areaBox">
      <div class="checkbox allCheckbox">
        <el-checkbox v-model="provinceCheckAll"
          @change="handleProvinceCheckAllChange">
          <span class="text">全选</span>
        </el-checkbox>
      </div>
      <el-checkbox-group v-model="checkedProvince" @change="handleCheckedProvinceChange">
        <div :class="`checkbox ${currentProvinceItemIndex === index ? 'checkedBox':''}`" @click="provinceItemClick(index)" v-for="(item, index) in area" :key="index">
          <el-checkbox :label="item.value"><span></span></el-checkbox>
          <div class="checkbox-content">
            <span class="text">{{item.label}}</span>
            <el-icon :size="14"><ArrowRight class="arrowRight" /></el-icon>
          </div>
        </div>
      </el-checkbox-group>
    </div>
    <div class="city areaBox">
      <div class="checkbox allCheckbox">
        <el-checkbox v-model="cityCheckAll"
          @change="handleCityCheckAllChange">
          <span class="text">全选</span>
        </el-checkbox>
      </div>
      <el-checkbox-group :model-value="checkedCity" @change="handleCheckedCityChange">
        <div 
          :class="`checkbox ${currentCityItemIndex === index ? 'checkedBox':''}`" 
          @click="cityItemClick(index)" 
          v-for="(item, index) in cityAreaData" 
          :key="index">
          <el-checkbox :label="item.value"><span></span></el-checkbox>
          <div class="checkbox-content">
            <span class="text">{{item.label}}</span>
            <el-icon :size="14"><ArrowRight class="arrowRight" /></el-icon>
          </div>
        </div>
      </el-checkbox-group>
    </div>
    <div class="county areaBox">
      <div class="checkbox allCheckbox">
        <el-checkbox v-model="countyCheckAll"
          @change="handleCountyCheckAllChange">
          <span class="text">全选</span>
        </el-checkbox>
      </div>
      <el-checkbox-group :model-value="checkedCounty" @change="handleCheckedCountyChange">
        <div 
          :class="`checkbox ${currentCountyItemIndex === index ? 'checkedBox':''}`" 
          @click="countyItemClick(index)" 
          v-for="(item, index) in countyData" 
          :key="index">
          <el-checkbox :label="item.value"><span></span></el-checkbox>
          <div class="checkbox-content">
            <span class="text">{{item.label}}</span>
          </div>
        </div>
      </el-checkbox-group>
    </div>
  </div>
</template>

<script setup>
import { getArea2 } from '@/utils/area'
const area = getArea2()
area.shift()

// 省选择逻辑
const provinceCheckAll = ref(false)
const checkedProvince = ref([])
const handleProvinceCheckAllChange = (val) => {
  checkedProvince.value = val ? area.map(item => item.value) : []
  area.forEach(item => {
    item['isChecked'] = val
  })
}
const handleCheckedProvinceChange = (val) => {
  const checkedCount = val.length
  provinceCheckAll.value = checkedCount === area.length
  area.forEach(item => {
    item['isChecked'] = val.includes(item.value)
  })
}
const currentProvinceItemIndex = ref(0)
const cityAreaData = ref(area[0].children)
const provinceItemClick = (index) => {
  currentProvinceItemIndex.value = index
  currentCityItemIndex.value = null
  cityCheckAll.value = false
  cityAreaData.value = area[index].children
  countyCheckAll.value = false
  countyData.value = []
}

// 市选择逻辑
const provinceCode = computed(()=>{
  return checkedProvince.value[currentProvinceItemIndex.value]
})
const cityCheckAll = ref(false)
const checkedCityObj = ref({})
const checkedCity = computed(()=>{
  return checkedCityObj.value[provinceCode.value] || []
})

const handleCityCheckAllChange = (val) => {
  checkedCityObj.value[provinceCode.value] = val ? cityAreaData.value.map(item=>item.value) : []
  area[currentProvinceItemIndex.value].children.forEach(item => {
    item['isChecked'] = val
  })
}
const handleCheckedCityChange = (val) => {
  checkedCityObj.value[provinceCode.value] = val
  area[currentProvinceItemIndex.value].children.forEach(item => {
    item['isChecked'] = val.includes(item.value)
  })
}
const currentCityItemIndex = ref(null)
const cityItemClick = (index) => {
  currentCityItemIndex.value = index
  currentCountyItemIndex.value = null
  countyCheckAll.value = false
  countyData.value = cityAreaData.value[index].children
}

// 区选择逻辑
const cityCode = computed(()=>{
  return cityAreaData.value[currentCityItemIndex.value]?.value
})
const countyData = ref([])
const countyCheckAll = ref(false)
const checkedCountyObj = ref({})
const checkedCounty = computed(()=>{
  return checkedCountyObj.value[cityCode.value] || []
})
const handleCountyCheckAllChange = (val) => {
  checkedCountyObj.value[cityCode.value] = val ? countyData.value.map(item=>item.value) : []
  area[currentProvinceItemIndex.value].children[currentCityItemIndex.value].children.forEach(item => {
    item['isChecked'] = val
  })
}
const handleCheckedCountyChange = (val) => {
  checkedCountyObj.value[cityCode.value] = val
  area[currentProvinceItemIndex.value].children[currentCityItemIndex.value].children.forEach(item => {
    item['isChecked'] = val.includes(item.value)
  })
}
const currentCountyItemIndex = ref(null)
const countyItemClick = (index) => {
  currentCountyItemIndex.value = index
}

const getCheckedThreeData = () => {
  // 检查子级是否有选中的数据，有就保留
  const data = []
  area.forEach(item => {
    if(isChecked(item)){
      data.push(item)
    }
  })
  
  return data
}
const getCheckedName = () => {
  const data = getCheckedThreeData()
  const nameList = data.map(item=>{
    return checkedName(item)
  })
  return nameList.flat(Infinity).join('，')
}
function isChecked(item){
  if(item.isChecked){
    return true
  }
  if(item.children){
    return item.children.some(item=>isChecked(item))
  }
  return false
}
function checkedName(item,pName=''){
  if(item.isChecked){
    return pName+item.label
  }
  if(item.children){
    return item.children.map(itemChild=>checkedName(itemChild,pName+item.label+'-')).filter(item=>item)
  }
  return null
}

defineExpose({
  checkedProvince,
  checkedCityObj,
  checkedCountyObj,
  getCheckedThreeData,
  getCheckedName
})
</script>

<style lang="less" scoped>
.cascaderPanel {
  border: 1px solid #E0DFE4;
  height: 330px;
  display: flex;
}

.areaBox {
  flex: 1;
  min-width: 180px;
  height: 100%;
  border-right: 1px solid #E0DFE4;
  overflow-y: auto;
}
.allCheckbox{
  position: sticky;
  top: 0;
  background-color: #fff;
  z-index: 9999;
}
.checkbox {
  display: flex;
  align-items: center;
  // justify-content: space-between;
  padding: 0 10px;
  cursor: pointer;
  .checkbox-content{
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
  }
}
.checkedBox{
  background: rgba(52, 128, 255, 0.1);
}
.arrowRight{
  width: 14px;
  height: 14px;
  color: #999;
}
.text{
  font-size: 14px;
  color: #000;
}
</style>